<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html class="mobile">
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>scrollable no-dojo with app header/footer</title>
		<link href="../themes/iphone/iphone.css" rel="stylesheet"></link>
		<style>
		html, body{
			height: 100%;
			overflow: hidden;
			visibility: visible;
		}
		.domNode {
			height: 100%;
			overflow: hidden;
		}
		.containerNode {
			position: absolute;
			width: 100%;
		}
		#header1 {
			position: absolute;
			width: 100%;
		}
		#footer1 {
			position: absolute;
			width: 100%;
			bottom: 0px;
		}
		</style>
		<script type="text/javascript" src="../scrollable.js"></script>

		<script language="JavaScript" type="text/javascript">
		function onLoad(){
			var scrollable = new dojox.mobile.scrollable();
			scrollable.init({
				domNode: document.getElementById("outer"),
				containerNode: document.getElementById("inner"),
				fixedHeaderHeight: document.getElementById("header1").offsetHeight,
				fixedFooterHeight: document.getElementById("footer1").offsetHeight
			});
		}
		</script>
	</head>
	<body onload="onLoad()">
		<h1 id="header1" class="mblHeading">Fixed Header (No-Dojo)</h1>

		<div id="outer" class="domNode">
			<div id="inner" class="containerNode">
				<h2 class="mblRoundRectCategory">Transition Effects</h2>
				<ul class="mblRoundRectList">
					<li class="mblListItem">
						<img class="mblListItemIcon" src="images/i-icon-1.png">
						<a class="mblListItemAnchor">
							<div class="mblListItemTextBox">Slide</div>
						</a>
					</li>
					<li class="mblListItem">
						<img class="mblListItemIcon" src="images/i-icon-2.png">
						<a class="mblListItemAnchor">
							<div class="mblListItemTextBox">Flip</div>
						</a>
					</li>
					<li class="mblListItem">
						<img class="mblListItemIcon" src="images/i-icon-3.png">
						<a class="mblListItemAnchor">
							<div class="mblListItemTextBox">Fade</div>
						</a>
					</li>
				</ul>

				<div class="mblRoundRect">
					<ol>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
						<li>Item</li>
					<ol>
				</div>
			</div>
		</div>

		<div id="footer1" class="mblTabBar">Fixed Footer</div>
	</body>
</html>
